<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>评论页面</title>

<style type="text/css">
body{background: url(images/200.png) no-repeat background-size:100% 100%;
}
body div{
}
.main{background-color: white;
}
.comment div{border:1px solid #ccc;
}
.cmt div{border:0px;
}

</style>


<!-- 当没有登录时让私信按钮无法点击 -->
<script type="text/javascript">
	$(function(){
		if("${user}"==""){
			$(".sixinbutton").attr("disabled","disabled");
		}
	})
</script>




<script type="text/javascript">
	$(function(){
		$("input[type='button']").css('background-color','#defae5');
	})
</script>

</head>
<body style="background: url(images/200.png);background-size:100%;">
<div class = "buttons" style = "border:1px solid black; float: right;position:relative;bottom:90px;">
	<a href = "${pageContext.request.contextPath }/ShowMyGoodsServlet?page=1">
		<input type = "button" value = "返回个人主页">
	</a>
</div>

<div class = "main" style = "margin-bottom:200px;width:800px;height:900px;margin-top:200px;margin-left: 250px;">
	<div class = "word7div" style = "width:100%;height:40px;line-height: 40px;background-color: green;color:white;font-size: 22px;font-weight: bold;">
		<div class = "word7">
			&nbsp&nbsp<span style="color:#fdaadb;">✿</span>分享评论
		</div>
	</div>
	<div class = "top" style = "float: left;width:100%;height:300px;">
		<div class = "topleft" style = "margin-top:10px;width:68%;height:270px;float: left;margin-right:10px;border-right:1px solid green;">
			<div class = "userinfo" style="background-color:#defae5;width: 95%;height:60px;margin-top:8px;margin-left: 8px;">
				<div class = "head" style="margin-left:5px;margin-top:5px;float:left;width:40px;height:40px;border-radius:40px 40px 40px 40px;">
					<img alt="" src="${userInfo.path }" style = "width:100%;height:100%;border-radius:40px;">
				</div>
				<div class = "username" style="float:left;width:300px;height:60px;">
					&nbsp${userInfo.userName } 
					<div class = "sixin1">
						<a href = "${pageContext.request.contextPath }/ChatServlet?chatUserID=${userInfo.userID}">
							<input type = "button" class = "sixinbutton" value = "私信Ta" style = "margin-left:4px;margin-top:6px;">
						</a>
					</div>
				</div>
			</div>
			<div class = "shareinfo" style = "background-color:#defae5;margin:10px;width:94%;height:180px;">
				<div class = "sharepic" style="width:180px;height:180px;float: left;margin-right:15px;">
					<img alt="" src="${shareInfo.path }" style = "width:100%;height:100%;border-radius:3px;">
				</div>
				<div class = "sharesay" style="background-color:white;width:270px;height:160px;float: left;margin-top:10px;overflow: hidden;word-wrap:break-word;">
					描述&nbsp:&nbsp${shareInfo.say }
				</div>
			</div>
		</div>
		
		
		<div class = "topright" style=" background-color:#defae5;width:230px;height:300px;float: left;border:0px solid black;">
			<div class = "" style = "border-bottom:2px solid green;color:green;width:98%;height:50px;text-align: center;font-size: 25px;line-height: 50px;">
				✪他的分享✪
			</div>
			<div class = "othershare" style="width:98%;height:240px;overflow-y: scroll;">
				<c:forEach items="${shareList }" var = "n">
						<div class = "pic5" style = "float: left;width:85%;height:180px;margin:16px;margin-top:10px;background-color: white;">
							<a href = "${pageContext.request.contextPath }/CommentServlet?shareID=${n.shareID}">
								<img alt="" src="${n.path }" style = "width:100%;height:80%;">
							</a>
							<div class = "say4" style = "word-wrap:break-word;width:90%;font-size:12px;color:#999;margin-left:10px;height:33px;overflow: hidden;">
								描述：${n.say }
							</div>
						</div>
						
				</c:forEach>
			</div>
			
		</div>
		
	</div>
	
	
	
	<div class = "commentdiv" style = "float: left;width:800px;">
		<div class = "cmttop" style="width:93%;margin-left:20px;height:30px;padding-top:10px;border-top:1px solid green;margin-top:10px;color:green;border-bottom:0px solid green;">
			●全部评论
		</div>
		<div class = "comment" style = "background-color:white;margin-top:10px;margin-left: 10px;width:97%;height:360px;overflow-y:scroll; ">
			
			<c:forEach items="${comment }" var = "n">
				<!-- 这里for循环 -->
				<div class = "cmt" style="padding-bottom:5px;padding-top:5px;margin-left:10px;width:98%;float: left; border:0px;border-top:1px solid #ccc;background-color:#fff ">
					<div class = "cmt_user_head" style = "width:40px;height:40px;border-radius:40px;float: left;">
						<img alt="" src="${n.path }" style="width:100%;height:100%;border-radius:40px;">
					</div>
					<div class = "cmt_user_username" style="color:#97978e;float: left;margin-top: 8px;">
						&nbsp&nbsp${n.userName }:&nbsp&nbsp
					</div>
					<div class = "cmt_content" style="float: left;margin-top: 8px;">
						${n.comment }
					</div>
				</div>
			</c:forEach>
			

			
			

			

			
			
			
		</div>
		
		
<!-- 		这里是发表评论的地方 -->
		<div class = "sendcmtdiv" style = "background-color:#defae5;padding-top:10px;margin-top:10px;margin-left:10px;width:97%;height:80px;float: left;">
			<div class = "inputcmtdiv" style = "float: left;">
				<div class = "cmthead" style = "width:40px;height:40px;float: left;border-radius:40px;">
					<img alt="" src="${user.path }" style = "width:100%;height:100%;border-radius:40px;">
				</div>
				<div class = "input" style="width:720px; float: left;">
					<input  type = "text"  placeholder="想对他说点什么" style = "width:100%;height:30px;">
				</div>
			</div>
			
			<div class = "sendbuttondiv" style = "margin:5px;float: right;">
				<input type = "button" value = "发表评论" style = "float: right;" class = "sendcomment">
			</div>
		</div>
	</div>

</div>










</body>

<!-- 当点击发表评论按钮时要做的事情 -->
<script type="text/javascript">
	$(function(){
		$('.sendcomment').click(function(){
			
			if($('.input input').val() != ""){
				if("${user}"!= ""){
					//添加元素，即生成div到页面（append）

					$('.comment').append("			<div class = \"cmt\" style=\"padding-bottom:5px;padding-top:5px;margin-left:10px;width:98%;float: left; border:0px;border-top:1px solid #ccc;background-color:#fff \">					<div class = \"cmt_user_head\" style = \"width:40px;height:40px;border-radius:40px;float: left;\">						<img alt=\"\" src=\"${user.path }\" style=\"width:100%;height:100%;border-radius:40px;\">					</div>					<div class = \"cmt_user_username\" style=\"color:#97978e;float: left;margin-top: 8px;\">						&nbsp&nbsp${user.userName }:&nbsp&nbsp					</div>					<div class = \"cmt_content\" style=\"float: left;margin-top: 8px;\">						"+$('.input input').val()+"					</div>				</div>");
					
					//ajax录入数据库
					
					$.ajax({
						url:"${pageContext.request.contextPath}/SendCommentServlet",
						type:"post",
						data:{"fromUserID":"${user.userID}","shareID":"${shareInfo.shareID}", "comment":$('.input input').val()},
						async:false,
						dataType:"json",
						success:function(d){
							if(d.msg == "1"){
							}else{
								alert("发送失败")
							}
						}
					});
					//最后删除输入框的值
					$('.input input').val('');
				}else{
					alert("请先登录");
				}
			}else{
				alert("评论不能为空");
			}
			
			
		})
		
		
		
		
		
		
	})
</script>


</html>
